<script lang="ts" name="index" setup>
import UseTimer from "../hooks/UseTimer";
import {useSettings} from "../stores/Settings";
import bottomsettings from "../components/bottomsettings.vue";

const {timertxt,model, Chinesecalendar, StopTimer, CountDown,recover} = UseTimer()
const settings = useSettings()
const {timercolor, describecolor, iconcolor, customdescription, customtext} = settings
/**
 * 暂停
 */
const suspend = () => {
  StopTimer()
}
/**
 * 开始
 */
const start = (): void => {
    recover()
}
</script>

<template>
  <div class="timershow drag" :style="{'color':timercolor}">{{ timertxt }}</div>
  <div v-if="customdescription==='default'" class="Chinesecalendarshow drag" :style="{'color':describecolor}">
    {{ Chinesecalendar }}
  </div>
  <div v-else class="Chinesecalendarshow drag" :style="{'color':describecolor}">{{ customtext }}</div>
  <bottomsettings
    :model="model"
    :color="iconcolor"
    @start="start"
    @timepiece="CountDown"
    @suspend="suspend"/>
</template>

<style scoped>
.timershow {
  font-size: 3em;
  font-weight: bolder;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.Chinesecalendarshow {
  text-align: center;
  cursor: pointer;
  height: 20px;
  line-height: 20px;
}
</style>
